<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态样式绑定</title>
    <!--
        看完老师的课总结了代码和笔记有需要的自提
        vue3: https://github.com/Panyue-genkiyo/vue3-learning
        vue2依据脚手架:https://github.com/Panyue-genkiyo/vue-advance
        vue基础不依赖脚手架:https://github.com/Panyue-genkiyo/vue-learning
    -->
    <script type="text/javascript" src="../../js/vue.js"></script>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }

        .happy{
            border: 4px solid red;;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px dashed rgb(2, 197, 2);
            background-color: gray;
        }
        .normal{
            background-color: skyblue;
        }
        .atguigu1{
            background-color: yellowgreen;
        }
        .atguigu2{
            font-size: 30px;
            text-shadow:2px 2px 10px red;
        }
        .atguigu3{
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div id = "root">
        <!--:class 绑定class样式 字符串写法 适用于样式的类名不确定需要动态琢磨的状况-->
        <div class="basic" v-bind:class="modify" v-on:click = "changeMode">
            {{content}}
        </div>
         <!--:class 绑定class样式字符串写法 实现多种样式的随机切换-->
        <div class="basic" v-bind:class="modify1" v-on:click = "changeStyle">
            {{content}}
        </div>

        <!--:class 绑定class样式数组写法 适用于要绑定的样式个数不确定，名字也不确定的状况-->
        <div class="basic" v-bind:class="modify2" v-on:click = "changeModify2">
            hello atguigu2
        </div>

        <!--:class 绑定class样式对象写法 适用于要绑定的样式个数确定，名字确定，但动态决定要不要用的状况-->
        <div class="basic" v-bind:class="modify3" v-on:click = "changeModify3">
            hello atguigu3
        </div>
        <!--内联样式绑定-->
        <div :style="{fontSize:a,color:b}">{{content}}</div>
        <div :style="modifyObj">{{content}}</div>

        <!---如果需要引入的样式数量不确定，可以使用对象数组-->
        <div :style="modifyObjArr">{{content}}</div>
        <div :style="[modifyObj1,modifyObj2]">{{content}}</div>

    </div>
   
     <script type="text/javascript">
        new Vue({
            el: "#root",
            data:function(){
                return {
                    content: 'hello welcome shangguigu',
                    modify: 'happy',
                    modify1: null,
                    modify2: ['atguigu1','atguigu2','atguigu3'],
                    modify3:{
                        atguigu1: false,
                        atguigu2: false 
                    },
                    modifyObj:{
                        fontSize: '20px',
                        background: 'red',
                        width: '300px',
                        height: '100px',
                        border: '1px solid black'
                    },
                    modifyObj1:{
                        fontSize: '20px', color: 'green'
                    },
                    modifyObj2:{
                        width: '300px',height: '200px'
                    },
                    a: '20px',
                    b: 'red',
                    modifyObjArr: [
                        {fontSize: '20px', color: 'green'},
                        {width: '300px',height: '200px'}
                    ]
                }
            },
            methods: {
                changeMode(){
                    this.modify ='sad'
                },
                //实现三种样式的随意切换
                changeStyle(){
                    const arr = ['happy','sad','normal']
                    //生成0-3之间的随机数，不包含3
                    const index = Math.floor(Math.random()*arr.length)
                    this.modify1 = arr[index]
                },
                changeModify2(){
                    //修改数组里的元素值
                    this.modify2.shift();
                },
                changeModify3(){
                    //操作modify3对象
                    this.modify3.atguigu1 = true
                }
            }
        })
     </script>
</body>
</html>